<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en">
<%@ include file="/commons/head.jsp" %>
<link rel="stylesheet" href="${ctx}/css/tables.css">
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <%@ include file="/commons/left.jsp" %>
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                管理员列表
            </h1>
            <section class="content">
                <div class="row">
                    <div class="col-md-9">
                        <div class="box box-primary" style="overflow:hidden">
                            <div class="table_body">
                                <table>
                                    <thead>
                                    <tr>
                                        <th>角色名称</th>
                                        <th>角色编码</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach var="item" items="${listRole}" varStatus="vs">
                                        <tr onclick="openMenu('${item.id}',this)">
                                            <td>${item.roleName}</td>
                                            <td>${item.roleCode}</td>
                                        </tr>
                                    </c:forEach>
                                    </tbody>
                                </table>
                            </div>
                            <div class="menu_list">
                                <ul>
                                    <c:forEach var="item" items="${listMenu}" varStatus="vs">
                                        <li>
                                            <div class="tit"><input type="hidden" name="${item.id}"
                                                                    value="${item.id}">${item.text}</div>
                                            <dl>
                                                <c:forEach var="childitem" items="${item.children}"
                                                           varStatus="vs2">
                                                    <dd>
                                                        <input type="hidden" name="${childitem.id}"
                                                               value="${childitem.id}">${childitem.text}
                                                    </dd>
                                                </c:forEach>
                                            </dl>
                                        </li>
                                    </c:forEach>
                                </ul>
                            </div>

                            <div class="box-footer">
                                <div class="col-sm-2"></div>
                                <input type="hidden" id="roleId">
                                <button type="button" class="btn btn-info" id="submit">提交</button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </section>
    </div>
    <%@ include file="/commons/script.jsp" %>
    <script type="text/javascript">
        $(function () {
            $(".menu_list dd").click(function () {
                $(this).toggleClass("curr");
            });

            $(".menu_list .tit").click(function () {

                if ($(this).hasClass("selected")) {
                    $(this).removeClass("selected").parents("li").find("dd").removeClass("curr");
                } else {
                    $(this).addClass("selected").parents("li").find("dd").addClass("curr");
                }
            });

            //菜单树点击保存
            $("#submit").click(function () {
                var roleId = $("#roleId").val();
                if (roleId == null || roleId == "") {
                    alert("请先选择角色!");
                    return false;
                }
                var roleMenuList = new Array();
                var utilListModel = new Object();

                //循环获取选中的菜单
                $(".menu_list li").each(function () {
                    if ($(this).find(".curr").length > 0) {
                        var roleMenu = new Object();
                        roleMenu.menuId = $(this).find(".tit > input").val();
                        roleMenu.roleId = roleId;
                        roleMenuList.push(roleMenu);
                        $(this).find(".curr").each(function () {
                            var roleMenu = new Object();
                            roleMenu.menuId = $(this).find("input").val();
                            roleMenu.roleId = roleId;
                            roleMenuList.push(roleMenu);
                        });
                    }
                });
                utilListModel.roleMenuList = roleMenuList;
                //ajax
                var url = '${ctx}/role/saveList';
                $.ajax({
                    cache: false,
                    type: "post",
                    url: url,
                    data: {roleMenuRelstr: JSON.stringify(utilListModel), roleId: roleId},
                    error: function () {
                        alert("系统异常");
                    },
                    success: function (data) {
                        if (data > 0) {
                            alert("保存成功");
                        } else {
                            alert("保存失败");
                        }
                    }
                });
            })
        });

        function openMenu(id, obj) {
            $(obj).addClass("curr").siblings("tr").removeClass();
            var url = '${ctx}/role/selectMenuByRoleId';
            $.ajax({
                cache: false,
                type: "post",
                url: url,
                data: {roleId: id},
                error: function () {
                    alert("系统异常");
                },
                success: function (data) {
                    $('.menu_list input').parent().removeClass("curr");
                    $.each(data, function (idx, item) {
                        $('.menu_list dl input[name=' + item.menuId + ']').parent().addClass("curr");
                    });
                    $("#roleId").val(id);
                }
            });
        }
    </script>
</body>
</html>